<template>
  <div class="p1756536466 bfff">
    <div class="fz32 pb20">订单时间</div>
    <uv-skeletons :loading="taskForm.id ? false : true" :skeleton=" [{ type: 'line', num: 3, gap: '20rpx' }]">
      <div class="f  jcsb" style="align-items: flex-end;">
        <div class="fz30">要求到达</div>
        <div class="fz30">{{taskForm.arrive_time}}</div>
      </div>
      <!-- <div class="f pt30 jcsb" style="align-items: flex-end;">
      <div class="fz30">顾客期望到达</div>
      <div class="fz30"></div>
    </div> -->
      <div class="p1756536840">
        <div class="fz30 p1756536847" style="color: #727171;">
          <div>接单</div>
          <div class="pt20">{{taskForm.accept_orders_time_desc || '--'}}</div>
        </div>
        <div class="fz30 p1756536847" style="color: #727171;">
          <div>到店</div>
          <div  class="pt20">{{taskForm.report_location_time_desc || '--'}}</div>
        </div>
        <div class="fz30 p1756536847" style="color: #727171;">
          <div>服务</div>
          <div  class="pt20">{{taskForm.pick_up_time_desc || '--'}}</div>
        </div>
        <div class="fz30 p1756536847" style="color: #727171;">
          <div>完成</div>
          <div  class="pt20">{{taskForm.service_complete_time_desc || '--'}}</div>
        </div>

      </div>
      <div class="f pt30 jcsb" style="align-items: flex-end;">
        <div class="fz30" style="white-space: nowrap;">订单号码</div>
        <div class="fz30">{{taskForm.order_no}}
          <div @click="handleCopy(taskForm.order_no)" class="" style="color: #2EA7E0;display: inline;">复制</div>
        </div>
      </div>
      <div
        v-if="taskForm.delivery_image && taskForm.delivery_image.length && (taskForm.service_status == 4 || taskForm.service_status == 5)"
        class="f pt30 jcsb" style="align-items: flex-end;">
        <div class="fz30">订单照片</div>
        <div class="fz30 f" @click="previewImageTap" style="align-items: baseline;line-height: 1;">查看<uv-icon
            size="30rpx" color="#C9CACA" name="arrow-right"></uv-icon>
        </div>
      </div>
    </uv-skeletons>
  </div>
</template>
<script>
  export default {
    props: {
      taskForm: {
        type: Object,
        default: {}
      },
    },
    methods: {
      handleCopy(content) {
        uni.setClipboardData({
          data: content,
          success: () => {
            uni.showToast({
              title: '复制成功',
              icon: 'none',
              duration: 2000,
            });
          },
          fail: (err) => {
            uni.showToast({
              title: '复制失败',
              icon: 'none',
              duration: 2000,
            });
            console.error('复制失败原因：', err);
          },
        });
      },
      previewImageTap(current = 1) {
        let urls = this.taskForm.delivery_image
        uni.previewImage({
          urls: urls,
          current: current,
          fail() {
            this.$uv.toast('预览图片失败')
          },
        });
      },
    },
  }
</script>
<style lang="scss" scoped>
@import '../common.scss';
.pl10 {
  padding-left: 10rpx;
}
  .p1756536466 {
    color: #333;
    border-radius: 20rpx;
    padding: 20rpx 30rpx 30rpx 30rpx;
    box-shadow: 2rpx 2rpx 20rpx 2rpx #eeeeee;
    
  }

  .p1756536840 {
    display: flex;
    background: #F7F8F8;
    border-radius: 16rpx;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    margin-top: 20rpx;

    .p1756536847 {
      width: 25%;
      text-align: center;

    }

  }
</style>